<script setup lang="ts">
import { ref } from 'vue'
import { ArrowRight, ShoppingCart } from '@element-plus/icons-vue'

interface ItemSpec {
  [key: string]: string | number
}

interface CartItemLite {
  id: string
  title: string
  image: string
  price: number
  num: number
  specs?: ItemSpec
}

defineProps<{ 
  items: CartItemLite[]
  total: number
  totalCount: number
  loading?: boolean
}>()

const emits = defineEmits<{ (e: 'checkout'): void }>()

const isOpen = ref(false)

const openBag = () => {
  isOpen.value = true
}
const closeBag = () => {
  isOpen.value = false
}

const handleCheckout = () => {
  emits('checkout')
}

</script>

<template>
  <div>
    <!-- 右侧浮动导航栏 -->
    <div class="side-dock">
      <div class="dock-item cart" @click="openBag" aria-label="购物袋">
        <el-icon class="cart-icon"><ShoppingCart /></el-icon>
        <div v-if="totalCount > 0" class="badge">{{ totalCount }}</div>
      </div>
    </div>

    <!-- 购物袋抽屉面板 -->
    <transition name="slide-left">
      <div v-if="isOpen" class="bag-drawer">
        <div class="drawer-header">
          <div class="title">购物袋</div>
          <el-icon class="close" @click="closeBag"><ArrowRight /></el-icon>
        </div>

        <div class="drawer-body">
          <div v-if="items.length === 0" class="empty">暂无已选商品</div>

          <div v-else class="item-list">
            <div class="item" v-for="item in items" :key="item.id">
              <img class="thumb" :src="item.image" alt="商品" />
              <div class="meta">
                <div class="title">{{ item.title }}</div>
                <div class="specs">
                  <template v-if="item.specs">
                    <span v-for="(v, k) in item.specs" :key="String(k)">{{ k }} {{ v }}</span>
                  </template>
                </div>
              </div>
              <div class="qty">x{{ item.num }}</div>
              <div class="price">¥{{ item.price.toFixed(2) }}</div>
            </div>
          </div>
        </div>

        <div class="drawer-footer">
          <div class="summary">
            <span>{{ totalCount }} 款商品</span>
            <span class="amount">¥{{ total.toFixed(0) }}</span>
          </div>
          <button class="checkout-btn" @click="handleCheckout">去结算({{ totalCount }})</button>
        </div>
      </div>
    </transition>
  </div>
  
  <!-- 遮罩 -->
  <transition name="fade">
    <div v-if="isOpen" class="overlay" @click="closeBag"></div>
  </transition>
</template>

<style scoped lang="scss">
.side-dock {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3rem;
  // background: #222;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 5rem;
  z-index: 1100;
}

.dock-item {
  width: 100%;
  height: 3rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.dock-item + .dock-item { border-top: 1px solid rgba(255,255,255,0.06); }

.dock-item.cart { color: #66b3ff; }
.dock-item.cart:hover { color: #89c9ff; }
.cart-icon { font-size:2rem; }
.badge {
  position: absolute;
  right: 0.25rem;
  top: -0.375rem;
  background: #ff2d6b;
  color: #fff;
  border-radius: 999px;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.bag-drawer {
  position: fixed;
  top: 0;
  right: 3rem; /* 留出侧栏宽度 */
  bottom: 0;
  width: 24rem;
  background: #fff;
  box-shadow: -4px 0 16px rgba(0,0,0,0.1);
  z-index: 1200;
  display: flex;
  flex-direction: column;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f0f0f0;
}
.drawer-header .title { font-weight: 600; }
.drawer-header .timer { color: #ff6a00; font-weight: 600; }
.drawer-header .close { cursor: pointer; }

.drawer-body { flex: 1; overflow: auto; padding: 0.5rem 1rem; }
.empty { color: #999; text-align: center; padding: 2rem 0; }

.item-list .item {
  display: grid;
  grid-template-columns: 4rem 1fr auto auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f7f7f7;
}

.item-list .item img {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  object-position: center; // 确保图片居中显示
  border-radius: 0.25rem;
  overflow: hidden; // 添加overflow hidden确保图片不会超出容器
}
.meta .title { font-size: 0.875rem; color: #333; margin-bottom: 0.25rem; }
.meta .specs { font-size: 0.75rem; color: #666; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.qty { color: #666; font-size: 0.875rem; }
.price { color: #ff6a00; font-weight: 600; }

.drawer-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid #f0f0f0;
}
.summary { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.summary .amount { color: #ff6a00; font-weight: 700; }
.checkout-btn {
  width: 100%;
  height: 2.25rem;
  background: #ff6a00;
  color: #fff;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 1150;
}

/* 动画 */
.slide-left-enter-from { transform: translateX(100%); opacity: 0; }
.slide-left-enter-active { transition: all 0.25s ease; }
.slide-left-leave-to { transform: translateX(100%); opacity: 0; }
.slide-left-leave-active { transition: all 0.2s ease; }

.fade-enter-from, .fade-leave-to { opacity: 0; }
.fade-enter-active, .fade-leave-active { transition: opacity 0.2s ease; }
</style>

